import React, { useState } from 'react'

export default function App() {

    // 直接创建的数据不具备响应式
    // let count = 100

    // 因为在函数组件中，所以无法使用 this
    // 可以使用 useState 来创建一个响应式数据
    // const [变量, 修改变量的方法] = useState(初始值)
    const [count, setCount] = useState(100)


    function add10() {
        // setCount(count + 10)

        // return 出去的内容就是我们最新的值
        setCount((prevCount) => {
            return prevCount + 10
        })
    }

    return (
        <div>
            <h1>App - {count} </h1>

            <button onClick={() => {
                setCount(count + 1)
            }}>点击加 1</button>

            <button onClick={add10}>点击加 10</button>
        </div>
    )
}
